<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>Bootstrap 实例 - 表格</title>
		<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	</head>

	<body>

		<table class="table">
			<caption>基本的表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-striped">
			<caption>条纹表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-bordered">
			<caption>边框表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-hover">
			<caption>悬停表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>
		<table class="table table-condensed">
			<caption>精简表格布局</caption>
			<thead>
				<tr>
					<th>名称</th>
					<th>城市</th>
					<th>密码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tanmay</td>
					<td>Bangalore</td>
					<td>560001</td>
				</tr>
				<tr>
					<td>Sachin</td>
					<td>Mumbai</td>
					<td>400003</td>
				</tr>
				<tr>
					<td>Uma</td>
					<td>Pune</td>
					<td>411027</td>
				</tr>
			</tbody>
		</table>
		<table class="table">
			<caption>上下文表格布局</caption>
			<thead>
				<tr>
					<th>产品</th>
					<th>付款日期</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr class="active">
					<td>产品1</td>
					<td>23/11/2013</td>
					<td>待发货</td>
				</tr>
				<tr class="success">
					<td>产品2</td>
					<td>10/11/2013</td>
					<td>发货中</td>
				</tr>
				<tr class="warning">
					<td>产品3</td>
					<td>20/10/2013</td>
					<td>待确认</td>
				</tr>
				<tr class="danger">
					<td>产品4</td>
					<td>20/10/2013</td>
					<td>已退货</td>
				</tr>
			</tbody>
		</table>
		<div class="table-responsive">
			<table class="table">
				<caption>响应式表格布局</caption>
				<thead>
					<tr>
						<th>产品</th>
						<th>付款日期</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>产品1</td>
						<td>23/11/2013</td>
						<td>待发货</td>
					</tr>
					<tr>
						<td>产品2</td>
						<td>10/11/2013</td>
						<td>发货中</td>
					</tr>
					<tr>
						<td>产品3</td>
						<td>20/10/2013</td>
						<td>待确认</td>
					</tr>
					<tr>
						<td>产品4</td>
						<td>20/10/2013</td>
						<td>已退货</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

</html>